<template>
  <el-dialog
    v-loading.lock="loading"
    class="base-dialog"
    :custom-class="'panna-dialog_medium'"
    :append-to-body="true"
    :title="$t('ModuleDevice.components.selectTag')"
    align="center"
    :visible.sync="deviceTagListDialogVisable"
    @closed="closeDialog"
  >
    <div class="deviceTagDialogList">
      <DeviceTagTable
        ref="deviceTagDialogList"
        :show-table-column="showTableColumn"
        :status-id="statusId"
        :checked-rows="checkedRows"
      ></DeviceTagTable>
    </div>
    <div slot="footer" class="dialog-footer" align="center">
      <el-button type="primary" @click="onSubmit()">{{ btn.Save }}</el-button>
      <el-button @click="closeDialog">{{ btn.Off }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import DeviceTagTable from "../views/DeviceTag/DeviceTagTable.vue";
export default {
  name: "DeviceTagDialogList",
  components: {
    DeviceTagTable,
  },
  props: {
    deviceTagListDialogVisable: {
      type: Boolean, // 布尔
      default: false, // 必填
    },
    checkedRows: {
      type: Array, // 布尔
      default: () => [], // 必填
    },
  },
  data() {
    return {
      loading: false,
      showTableColumn: false,
      statusId: 1,
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
  },
  mounted() {
    this.initData();
  },
  created() {},
  methods: {
    initData() {},
    onSubmit() {
      var rows = this.$refs.deviceTagDialogList.$refs.deviceTagTable.selection;
      this.$emit("checkedRowsFun", rows);
      this.$emit("update:deviceTagListDialogVisable", false);
    },

    closeDialog() {
      this.$emit("update:deviceTagListDialogVisable", false);
    },
  },
};
</script>
<style scoped lang="scss">
.deviceTagDialogList {
  ::v-deep .el-form--inline {
    text-align: left;
    float: left;
  }
  ::v-deep .base-content-operate {
    text-align: left;
  }
}
</style>
